<template>
<div>
  <div id="login-main">
    <el-card class="box-card">

      <template #header>
        <div class="card-header">
          <span style="font-weight: bolder;color: #2155c2">使用电话号或密保找回密码</span>
        </div>
      </template>




      <el-tabs type="border-card" stretch="true" class="el-tabs-login">
        <el-tab-pane label="密保问题找回" tab-position="right">


          <el-card  style="clear:both;">
            <div style="margin-left: 0px">密保问题：{{question}}</div>
          </el-card>
          <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px" hide-required-asterisk="false">
            <el-form-item label="电话号" prop="username">
              <el-input type="text" v-model="resetForm.phone" auto-complete="off" placeholder="请输入电话号"></el-input>
              <el-button type="primary" plain @click="check_phone()" >验证电话号</el-button>
            </el-form-item>
            <el-form-item label="密保答案" prop="username">
              <el-input type="text" v-model="resetForm.answer" auto-complete="off" placeholder="请输入答案"></el-input>
            </el-form-item>
          </el-form>




          <el-button type="primary" plain @click="check_answer()" style="margin-left: 10px">验证密保答案</el-button>

          <el-button type="primary" plain @click="backlogin()" style="margin-left: 75px">返回</el-button>

        </el-tab-pane>



        <el-tab-pane label="电话号验证找回" tab-position="left">

          <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px" hide-required-asterisk="false">
            <el-form-item label="电话号" prop="username">
              <el-input type="text" v-model="resetForm.phone" auto-complete="off" placeholder="请输入电话号"></el-input>
              <el-button type="primary" plain @click="check_phone_number()" >验证电话号并获取验证码</el-button>
            </el-form-item>

            <el-form-item label="验证码" prop="username">
              <el-input type="text" v-model="inputCode" auto-complete="off" placeholder="请输入收到的验证码"></el-input>
            </el-form-item>



            <el-button type="primary" plain @click="confirmCode()" style="margin-left: 45px">确认验证码</el-button>
            <el-button type="primary" plain @click="backlogin()" style="margin-left: 75px">返回</el-button>
          </el-form>


        </el-tab-pane>
      </el-tabs>



    </el-card>
  </div>
</div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "recoverpassword",
  data(){
    var validateid = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话！'));
      } else {
        callback();
      }
    };
    return{
      //重置密码
      resetForm: {},
      resetFormRules: {
        phone: [
          { required: true, validator: validateid, trigger: 'blur' }
        ]
      },
      question:'',
      correctCode: '',
      inputCode: ''

    }
  },
  methods:{
    check_phone(){
      this.$http.post("/user/check_phone",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          ElMessage({
            message: '查询成功！',
            type: 'success',
          })
          this.question=res.data
        }else {
          ElMessage.error('查询失败！')
        }
      }).catch(()=>{
            ElMessage.error('查询失败！')
          }
      )
    },
    check_answer(){
      this.$http.post("/user/check_answer",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          ElMessage({
            message: '验证成功！，即将重置密码',
            type: 'success',
          })
          this.$router.push("/changepassword")
        }else {
          ElMessage.error('验证失败！')
        }
      }).catch(()=>{
            ElMessage.error('验证失败！')
          }
      )
    },
    backlogin(){
      this.$router.push("/login")
    },
    check_phone_number(){
      this.$http.post("/user/check_phone_number",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          ElMessage({
            message: '查询成功！即将发送验证码',
            type: 'success',
          })
          this.correctCode=res.data
        }else {
          ElMessage.error('查询失败！')
        }
      }).catch(()=>{
            ElMessage.error('查询失败！')
          }
      )
    },
    confirmCode(){
      if(this.correctCode===this.inputCode){
        ElMessage({
          message: '验证成功！即将重置密码',
          type: 'success',
        })
        this.$router.push("/changepassword")
      }else{
        ElMessage.error('验证失败！')
      }
    }
  }
}
</script>

<style scoped>
#login-main{
  margin-left: 0px;
  height: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.box-card {
  width: 480px;
  margin-left: 0px;
  height: 100%;
}

</style>
